<template>
  <div>
    <sy-popover position="top">
      <template slot="content">
        <div>Content of popover</div>
      </template>
      <sy-button>Click me</sy-button>
    </sy-popover>
    <sy-popover position="top">
      <template slot="content">
        <div>Content of popover</div>
      </template>
      <sy-button>Top</sy-button>
    </sy-popover>
    <sy-popover position="bottom">
      <template slot="content">
        <div>Content of popover</div>
      </template>
      <sy-button>Bottom</sy-button>
    </sy-popover>
    <sy-popover position="left">
      <template slot="content">
        <div>Content of popover</div>
      </template>
      <sy-button>left</sy-button>
    </sy-popover>
    <sy-popover position="right">
      <template slot="content">
        <div>Content of popover</div>
      </template>
      <sy-button>Right</sy-button>
    </sy-popover>
  </div>
</template>
